<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
	#lan{
		background-color:white ;
	}
	#lan ul li{
		padding: 35px;
		line-height:20px;
		list-style: none;
	}
#button1 {
	position: absolute;
	left: 200px;
	width: 80px;
	bottom: 20px;
}
#button2 {
	position: absolute;
	left: 200px;
	width: 80px;
	bottom: 20px;
}
.roleCodes {
	border: 0;
	width: 50px;
	background-color: transparent;
}
.role {
	border: 0;
	width: 50px;
	background-color: transparent;
}
.go-back {
	text-align: center;
	border-top: 1px dashed #ccc;
	padding: 10px;
	margin-top: 20px;
	font-size: 40px;
}

.black_overlay {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: alpha(opacity = 80);
	opacity: 0.8;
	overflow: hidden;
	background-color: #000;
}

.white_content {
	display: none;
	position: absolute;
	top: 15%;
	left: 20%;
	width: 500px;
	height: 600px;
	border-radius: 10px;
	border: 16px solid #FFF;
	border-bottom: none;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

#light a {
	float: right;
}
#light1 a {
	float: right;
}
#tiao {
	margin-left: 500px;
}

#example {
	width: 1100px;
	float: right;
	margin-top: 200px;
	margin-right: 100px;
}

#cuanjian {
	top: 150px;
	position: absolute;
	margin-left: 100px;
}

#box {
	position: absolute;
	width: 100%;
	background-color: #FFFAFA;
	border: 1px solid #D1D1D1;
	height: 742px;
}

#da {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 1300px;
	border: 1px solid #D1D1D1;
	background-color: white;
}

h1 {
	position: absolute;
	left: 100px;
	height: 40x;
}

#chaxun {
	position: absolute;
	width: 1100px;
	top: 20px;
	left: 100px;
	float: right;
	height: 40px;
	border: #000000 1px solid;
}

.wrapper {
	
}

#td {
	margin-top: -25px;
	margin-left: 230px;
}
.panel-heading{
  height: 39px;
}
#tiao a {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	text-decoration: none;
}

#sx a {
	width: 74px;
	height: 40px;
	display: block;
}/* 导航栏 */
 .top{
    /* 设置宽度高度背景颜色 */
    height: 60px; /*高度改为自动高度*/
    width:100%;
    margin-left: 0;
   
    position: fixed; /*固定在顶部*/
    top: 0;/*离顶部的距离为0*/
    margin-bottom: 5px;
    position:relative;
z-index:19999;
    
}
.top ul{
    /* 清除ul标签的默认样式 */
    width: auto;/*宽度也改为自动*/
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 75%;
    /* margin-top: 0;          */
    padding: 0;
    

}
.top li {
    float:left; /* 使li内容横向浮动，即横向排列  */
    margin-right:2%;  /* 两个li之间的距离*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /* 设置链接内容显示的格式*/
    display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
    color:black;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* 去除下划线 */
    
}
.top li a:hover{
    /* 鼠标选中时背景变为黑色 */
    background-color:aliceblue;
}
.top ul li ul{
    /* 设置二级菜单 */
    margin-left: -0.2px;
    color:white;
    position: relative;
    display: none; /* 默认隐藏二级菜单的内容 */

}
.top ul li ul li{
    /* 二级菜单li内容的显示 */
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* 鼠标选中二级菜单内容时 */
    display: block;}
    .j{
    	font-size: 20px;
    	margin-left: 5%;
    	
    }

body{
    background:#eff3f5;
}

</style>
</head>
<script type="text/javascript">
	//页面获取数据
	var y = document.getElementById("y").value;
	function fun2() {
		refurbishIndex(1);
	};
	$(function() {
		refurbishIndex();
		
	});
	function moren(){
		cha(1);
	}
	function refurbishIndex(num) {
		$.ajax({
					type : "get",
					url : "/ssm/list1",
					data : {
						'y' : num
		
					},
					async : false,
					success : function(data) {
						var str = "";
						for (i in data) {

							str += "<tr>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].id
									+">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].usercode
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].password
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].name
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].age
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].grade
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].phoneNumber
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].sex
									+ ">"
									+ "</td>"
									+ "<td>"
									+ data[i].type
									+ "</td>"
									+ "<td>"
									+ "<button data-id='data[i].id' class='btn btn-danger btn-sm' onclick='del(this);delet(this)'>删除</button>"
									+ " "
									+ "<button class='btn btn-primary btn-sm'onClick='geng(this)' >更改</button>"
									+ "</td>"
							"</tr>";

						}
						document.getElementById("shuju").innerHTML = str;
					}
				});
	}
	function del(nowTr) {
		$(nowTr).parent().parent().remove();
	};
	//删除功能
	function delet(y) {
		var roleCode = $(y).parents("tr").find(".role").val()
		var t = parseInt(roleCode);
		
		$.ajax({
			type : "get",
			url : "/ssm/del",
			data : {
				'id' : t
			},
			traditional : true,
			async : false,
			success : function(result) {
			},
			error : function(result) {
			}
		});
	}
	//模糊查询
	function cha(num) {
         var grade=$("#nm").val();
		 var name=$("#bh").val();
		 var typed=$("#typed").val();
		$.ajax({
					type : "get",
					url : "/ssm/list",
					data : {
						'y' : num,
						'name':name,
						'grade':grade,
						'type':typed
					},
					async : false,
					success : function(data) {
						var str = "";
						for (i in data) {

							str += "<tr>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].id
								+">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].usercode
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].password
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].name
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].age
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].grade
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].phoneNumber
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].sex
								+ ">"
								+ "</td>"
								+ "<td>"
								+ data[i].type
								+ "</td>"
								+ "<td>"
									+ "<button data-id='data[i].id' class='btn btn-danger btn-sm' onclick='del(this);delet(this)'>删除</button>"
									+ " "
									+ "<button class='btn btn-primary btn-sm'onClick='geng(this)' >更改</button>"
									+ "</td>"
							"</tr>";

						}
						document.getElementById("shuju").innerHTML = str;
					}
				});
	}
	//点击按钮刷新页面

	//
	function baocun() {
		location.reload();
	}
	//更改
	function geng(o) {
		var roleCode = $(o).parents("tr").find(".role").val()
		var t = parseInt(roleCode);
		var element = document.getElementById("id");
		element.value = t;
		document.getElementById('light1').style.display = 'block';
		document.getElementById('fade1').style.display = 'block';
	}
	//修改
	function update() {
		var id=$("input[name='id']").val();
	    var usercode=$("input[name='usercode']").val();
	    var password=$("input[name='password']").val();
	    var name=$("input[name='name']").val();
	    var age=$("input[name='age']").val();
	    var grade=$("input[name='grade']").val();
	    var phoneNumber=$("input[name='phoneNumber']").val();
	    var sex=$("input[name='sex']").val();
	    var type=$("input[name='type']").val();
	     
	    $.ajax({
	        url:'/update',
	        type:"put",
	        async:false,
	        data:{},
	        success:function(data){ 
	        },
	        error:function (data) {
	            alert("修改失败");
	        }
	    });
	};
</script>
<body>
<!--  导航栏-->

	<div class="j">健之小屋1.0</div>
	
	
            <div class="top">
            
                   <center> 
                    <ul>
                  
                    <li><img src="/gonggao.jpg" width="60" height="30"/></li>
                    <li><a href="#"><img src="/tongji.jpg" width="60" height="30	"></a></li>
                    <li><a href="#"><img src="/yonghu.jpg" width="60" height="30	"></a>
                    	<ul>
                            <li><a href="#">用户：</a></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    	
                    </li>
                    <li>
                        <a href="#"><img src="/shezhi.jpg" width="60" height="30"></a>
                        <ul>
                            <li><a href="#">高级设置</a></li>
                             <li><a href="#">版本更新</a></li>
                            <li><a href="#">关于</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
	<div id="box">
		<div id="lan">
			<ul>
				<li><a href="/ssm/index">用户管理页面</a></li>
				
				<li><a href="../doctor">医生管理页面</a></li>
				<li><a href="../drug">药品管理页面</a></li>
				<li><a href="../prescription">处方管理页面</a></li>
				<li><a href="../medical">电子病历管理页面</a></li>
				<li><a href="../yuguanli">预约管理页面</a></li>
			</ul>
			
		</div>
		<div id="da">
			<div id="chaxun">
			<div class="panel panel-primary">
			<div class="panel-heading">
                <h1 class="panel-title">客户管理</h1>
            </div>
              <div class="panel-body form-inline">
              <label>
			     姓名:<input class="form-control" type="text" id="bh" />
			   
			     班级: <input class="form-control" type="text" id="nm" />
			      类型: <select id="typed" name="typed"
							class="form-control" >
							<option value="">-请选择-</option>
							<option>学生</option>
							<option>老师</option>
						</select>
			  
			   
						</label>
			<button id="button" onclick="moren();cha()"class="btn btn-primary btn-sm">查询</button> 
			</div>
			</div>
			</div>
			<div class="wrapper">
				<button id="cuanjian" class="btn btn-primary"
					onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">创建</button>
				<div id="light" class="white_content">
					<a href="javascript:void(0)"
						onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a>
					<form action="./save">
						用户账号: <input type="text" id="usercode" name="usercode" class="form-control" /> 
						用户密码: <input type="text" id="password" name="password" class="form-control" /> 
						用户名: <input type="text" id="name" name="name" class="form-control" /> 
						年龄: <input type="text" id="age" name="age" class="form-control" /> 
						班级: <input type="text" id="grade" name="grade" class="form-control" /> 
						手机号码: <input type="text" id="phoneNumber" name="phoneNumber" class="form-control" /> 
						性别: <input type="text" id="sex" name="sex" class="form-control" /> 
						类型: <input type="text" id="type" name="type" class="form-control" /> 
						<button id="button1" class="btn btn-primary btn-sm">保存</button>
					</form>
				</div>
				<div id="fade" class="black_overlay" style="display: none;"></div>
			</div>
			<!-- 更改 -->
			<div class="wrapper">
				<div id="light1" class="white_content">
					<a href="javascript:void(0)"
						onclick="document.getElementById('light1').style.display='none';document.getElementById('fade1').style.display='none'">关闭</a>
					 <form action="./update">
					id:<input type="text" onfocus="this.blur()" class="form-control" id="id" name="id"/>
					        用户账号: <input type="text"  id="usercode" name="usercode" class="form-control" /> 
						用户密码: <input type="text" id="password" name="password" class="form-control" /> 
						用户名: <input type="text" id="name" name="name" class="form-control" /> 
						年龄: <input type="text" id="age" name="age" class="form-control" /> 
						班级: <input type="text" id="grade" name="grade" class="form-control" /> 
						手机号码: <input type="text" id="phoneNumber" name="phoneNumber" class="form-control" /> 
						性别: <input type="text" id="sex" name="sex" class="form-control" /> 
						类型: <input type="text" id="type" name="type" class="form-control" /> 
						<button id="button2" class="btn btn-primary btn-sm">保存</button>
					</form>
				</div>
				<div id="fade1" class="black_overlay" style="display: none;"></div>
			</div>
			<!-- 用户数据获取 -->
			<table id="example" class="table table-striped" data-role="none">
				<thead>
					<tr>
						<th>Id</th>
						<th>账号</th>
						<th>密码</th>
						<th>名字</th>
						<th>年龄</th>
						<th>班级</th>
						<th>手机号码</th>
						<th>性别</th>
						<th>类型</th>
						<th>Operation</th>
					</tr>
				</thead>
				<tbody id="shuju">

				</tbody>
			</table>
			
			<div id="tiao">
				<input placeholder="页数" id="y" type="number" min="1" max="10"
					value="1" />
				<button class="btn btn-primary btn-sm" onclick="fun()">跳转</button>
				<div id="td">
				<ul id="r" >
				  </ul>
				</div>
				<div id="sx">
					<a href="#" class='page-link' onclick="shang()">上一页</a> <a href="#"
						class='page-link' onclick="xia()">下一页</a>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>
<script>
	fun2();
	function fun() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		refurbishIndex(y)
		cha(y)
	}
	function xia() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		if (y < 5) {
			var x = ++y;
			refurbishIndex(x);
			cha(x);
			var element = document.getElementById("y");
			element.value = x;
		}
	}

	function shang() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		if (y >= 2) {
			var x = --y;
			refurbishIndex(x);
			cha(x);
			var element = document.getElementById("y");
			element.value = x;
		}
	}
	var str = "";
	for (var i = 1; i <= 5; i++) {
		str += "<a class='page-link' href='javascript:changeText(" + i
				+ ")' onclick='refurbishIndex(" + i + ");cha(" + i + ")'>" + i + "</a>";
	}
	document.getElementById("r").innerHTML = str;

	function changeText(text) {
		var element = document.getElementById("y");
		element.value = text;
	}
</script>
